<!-- pages/component/component.vue -->
<template>
	<view class="main-container">
		<!-- ... "1. 容器" 和 "2. 基础内容" 部分保持不变 ... -->
		<!-- <view class="item-obj" @click="navito('progress')">
			<text>3. progress</text>
		</view> -->

		<!-- 3. 表单组件 -->
		<view class="class-title-item">
			<h2 class="item-title">
				3. 表单组件
			</h2>
		</view>
		
		<!-- 【添加这里】 -->
		<view class="item-obj" @click="navito('button')">
			<text>1. button</text>
		</view>
		<view class="item-obj" @click="navito('radio')">
			<text>2. radio</text>
		</view>
		<view class="item-obj" @click="navito('checkbox')">
			<text>3. checkbox</text>
		</view>
		<view class="item-obj" @click="navito('input')">
			<text>4. input</text>
		</view>
		<view class="item-obj" @click="navito('picker')">
			<text>5. picker</text>
		</view>
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			navito(e) {
				uni.navigateTo({
					url: '/pages/components/biao/' + e + '/' + e
				})
			}
		}
	}
</script>

<style>
/* ... 你原有的样式保持不变 ... */
/* 添加一个禁用样式 */
.item-obj-disabled {
	/* 复制 .item-obj 的样式 */
	margin-bottom: 12px;
	background-color: #fdfdfd;
	padding: 10px;
	border-radius: 5px;
	/* ... 其他 .item-obj 样式 ... */
	
	/* 禁用效果 */
	color: #999;
	opacity: 0.6;
}
</style>